<template>
  <div>
    <!-- 1.0静态铺设 -->
    <h3>商品清单如下：</h3>
    <!-- 遍历数据 -->
    <div v-for="(obj,index) in list" :key="index">
      <span>{{obj.shopName}}</span>--
      <span>{{obj.price}}</span>元/份
      <!-- <span>{{obj.count}}</span> -->
    </div>
      <h3>请选择购买数量：</h3>
      <Food 
      v-for="(obj,index) in list" 
      :key="index"
      :goodsname="obj.shopName"
      :count="obj.count"
      :ind="index"
      @add="addFn"
      @del="delFn"
      ></Food>
      <!-- //子-》父 -->
      <p>总价为：<b>{{total}}</b> 元</p>
  </div>
</template>

<script>
import Food from './components/Food'
export default {
  components:{
    Food
  },
  data(){
    return{
      list:
      [
    {
        "shopName": "可比克薯片",
        "price": 5.5,
        "count": 0
    },
    {
        "shopName": "草莓酱",
        "price": 3.5,
        "count": 0
    },
    {
        "shopName": "红烧肉",
        "price": 55,
        "count": 0
    },
    {
        "shopName": "方便面",
        "price": 12,
        "count": 0
    }
]
    }
  },
  computed:{
    total(){
       return this.list.reduce((sum, obj) => sum += obj.count * obj.price, 0)
    }
  },
  methods:{
    addFn(ind){
      this.list[ind].count++
    },
    delFn(ind){
       this.list[ind].count >0 && this.list[ind].count --
    }
  }
}
</script>

<style>
  div {
    margin-top: 5px;
  }
  b {
    color: red;
  }
</style>